<template>
   <!-- 加载图标样式4 -->
   <div class="loading"></div>
</template>

<script setup>

</script>

<style scoped lang='scss'>
.loading {
   animation: satellite 3s linear infinite;
   border: 3px solid #1678ff;
   border-radius: 100%;
   height: 48px;
   position: relative;
   width: 48px
}

.loading:after,
.loading:before {
   background-color: #1678ff;
   border-radius: 100%;
   box-shadow: 0 0 10px #1678ff;
   content: "";
   height: 12px;
   left: 1px;
   position: absolute;
   top: 1px;
   width: 12px
}

.loading:after {
   height: 20px;
   margin: 13px;
   right: 0;
   width: 20px
}

@keyframes satellite {
   0% {
      transform: rotate(0) translateZ(0)
   }

   to {
      transform: rotate(1turn) translateZ(0)
   }
}
</style>
